import React from 'react'
import { Button, Form, Input, Select, message } from 'antd';
import request from '../../utils/request'
import { addAccountApi } from '../../apis/user';
const { Option } = Select;
export default function AddAccount() {
  // 列表数据ref
  const formRef = React.useRef(null)
  // 加载动画
  const [loading, setLoading] = React.useState(false)
  // 点击确定提交
  const onFinish = (values) => {
    console.log('Success:', values);
    setLoading(true)
    addAccountApi(values)
  //  request('/users/addOrEditAccount', {
  //     method:'post',
  //     body: values
  //   })
    .then(res=>{
      setLoading(false)
      message.success('添加成功')
      console.log('request',res);
      formRef.current.resetFields()
    }).catch(res=>{
      setLoading(false)
    })

    //  fetch("http://jacklv.cn/users/addOrEditAccount",{
    //   method:'post',
    //   headers: {
    //     "Content-Type": "application/json",
    //     token: localStorage.token,
    //   },
    //   body:JSON.stringify(values)
    //  }).then((response)=>response.json())
    //  .then(res=>{
    //    console.log('真res',res);
    //    if(res.code===1){
    //     message.success('添加成功')
    //     setLoading(false)
    //     formRef.current.resetFields()
    //    }else{
    //     message.error('添加失败')
    //     setLoading(false)
    //    }
    //  })
    //  .catch(err=>{
    //   setLoading(false)
    //  })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div style={{ height: '80vh', display: 'flex' }}>
      <Form
        ref={formRef}
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          width: 500,
        }}
        initialValues={{
          userGroup: '普通管理员',
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="用户名"
          name="account"
          rules={[
            {
              required: true,
              message: '请输入正确用户名!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="userGroup"
          label="身份"
          rules={[
            {
              required: true,
              message: '请选择角色'
            },
          ]}
        >
          <Select
            placeholder="选择一个身份"
            allowClear
          >
            <Option value="超级管理员">超级管理员</Option>
            <Option value="普通管理员">普通管理员</Option>
          </Select>
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button loading={loading} type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form></div>
  )
}
